<template>
  <div id="invoicepdf" class="dashboard-container body-min-width" ref="print" :style="{fontSize: fontSize}">
    <h2 class="head-big-title">Invois Pembelian
      <svg-icon icon-class="ico_print" class="no-print" style="float: right;margin-right: 5%;font-size: 30px; cursor: pointer;" @click="downloadPrint"></svg-icon>
      <svg-icon icon-class="ico_pdf" class="no-print" style="float: right;margin-right: 33px;font-size: 30px; cursor: pointer;" @click="downloadPDF"></svg-icon>
    </h2>
    <Pathnavigation style="margin-left: 3%;"></Pathnavigation>
    <div class="card-div">
      <el-card shadow="always" class="one-card" :body-style="{ padding: '15px 0 25px 20px' }">
        <div style="width: 60%;margin-top: 10px;">
          <h2 class="title">{{detailData.dealerBrief.dealerName}}</h2>
          <div class="head-info-three">
            <span style="word-break:normal;">
              <svg-icon icon-class="ico_address" style="font-size: 18px;margin-right: 6px;"></svg-icon>
              {{detailData.dealerBrief.shopAddr.streetAddress + ', ' +detailData.dealerBrief.shopAddr.regionalAddress + ', ' + detailData.dealerBrief.shopAddr.postCode + ', ' + detailData.dealerBrief.shopAddr.city + ', ' + detailData.dealerBrief.shopAddr.region}}</span>
          </div>
          <div class="head-info-three">
            <span>
              <svg-icon icon-class="ico_mail" style="font-size: 18px;margin-right: 6px;"></svg-icon>
             {{detailData.dealerBrief.emailAddress}}</span>
          </div>
          <div class="head-info-three">
            <span>
              <svg-icon icon-class="ico_phone" style="font-size: 18px;margin-right: 6px;"></svg-icon>
              {{detailData.dealerBrief.shopAddr.phoneNumber}}</span>
          </div>
        </div>
        <div class="header-div">
          <el-image
            style="width: 70px;height: 70px;"
            :src="picbase + detailData.dealerBrief.logoUrl"></el-image>
        </div>
      </el-card>
    </div>
    <div class="card-div">
      <el-card shadow="always" class="one-card margin-tops" :body-style="{ padding: '15px 0 10px 20px' }">
        <p class="middle-info"><label>Nombor Invois: </label>{{detailData.invoiceId}}</p>
        <p class="middle-info"><label>Nombor Pesanan: </label>{{detailData.oid}}</p>
        <p class="middle-info"><label>Tarikh: </label>{{$getTime(detailData.date)}}</p>
        <p class="middle-info"><label>Cara Pembayaran: </label>{{detailData.payMethod}}</p>
        <p class="middle-info"><label>Status: </label>
          <strong v-for="(item, index) in $orderStateList" :key="index" v-show="detailData.state == item.value">{{item.label}}</strong>
        </p>
      </el-card>
    </div>
    <div class="card-div">
      <el-card shadow="always" class="two-card margin-tops" :body-style="{ padding: '15px 0 25px 20px' }">
        <h2 class="title">Alamat Bil</h2>
        <p class="two-info">
          <svg-icon icon-class="ico_user" style="font-size: 18px;margin-right: 6px;"></svg-icon>
          {{detailData.billesAddres.name}}</p>
        <p class="two-info">
          <svg-icon icon-class="ico_phone" style="font-size: 18px;margin-right: 6px;"></svg-icon>
          {{detailData.billesAddres.phoneNumber}}</p>
        <p class="two-info">
          <svg-icon icon-class="ico_address" style="font-size: 18px;margin-right: 6px;"></svg-icon>
          {{detailData.billesAddres.streetAddress + ', ' +detailData.billesAddres.regionalAddress + ', ' + detailData.billesAddres.postCode + ', ' + detailData.billesAddres.city + ', ' + detailData.billesAddres.region}}</p>
      </el-card>
      <el-card shadow="always" class="two-card margin-tops" style="margin-bottom: 20px;" :body-style="{ padding: '15px 0 25px 20px' }">
        <h2 class="title">Alamat Penghantaran</h2>
        <p class="two-info">
          <svg-icon icon-class="ico_user" style="font-size: 18px;margin-right: 6px;"></svg-icon>
          {{detailData.shopAddres.name}}</p>
        <p class="two-info">
          <svg-icon icon-class="ico_phone" style="font-size: 18px;margin-right: 6px;"></svg-icon>
          {{detailData.shopAddres.phoneNumber}}</p>
        <p class="two-info">
          <svg-icon icon-class="ico_address" style="font-size: 18px;margin-right: 6px;"></svg-icon>
          {{detailData.shopAddres.streetAddress + ', ' +detailData.shopAddres.regionalAddress + ', ' + detailData.shopAddres.postCode + ', ' + detailData.shopAddres.city + ', ' + detailData.shopAddres.region}}</p>
        <!-- <p class="two-info">
          <svg-icon icon-class="ico_delivery_note" style="font-size: 18px;margin-right: 6px;"></svg-icon>
          {{detailData.sysOrderMsg.buyerMsg}}</p> -->
      </el-card>
    </div>
    <div>
      <el-table
        :data="detailData.detail"
        style="width: 94%;margin: 20px 3% 0 3%;padding-left: 10px;border-radius: 10px;text-align: center;">
        <el-table-column label="" width="100">
          <template slot-scope="scope">
            <el-image
              style="width: 64px; height: 64px"
              :src="picbase + scope.row.picUrl"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="productName" align="center" label="Nama Produk" width="166"></el-table-column>
        <el-table-column prop="quantity" align="center" label="Kuantiti"></el-table-column>
        <el-table-column label="Harga">
          <template slot-scope="scope">
            <p>{{$formatMoneyStr(scope.row.price)}}</p>
            <p v-show="scope.row.buyunit">1 {{ scope.row.buyunit }}</p>
          </template>
        </el-table-column>
        <el-table-column label="Jumlah">
          <template slot-scope="scope">
            <p>{{$formatMoneyStr(scope.row.allmoney)}}</p>
          </template>
        </el-table-column>
      </el-table>
      <div class="total-sum-div">
        <p class="middle-info"><label>Jumlah Kecil</label>: {{$formatMoneyStr(detailData.puductFee) }}</p>
        <p class="middle-info"><label>Jumlah Penghantaran</label>: {{$formatMoneyStr(detailData.deliveryFee) }}</p>
        <p class="middle-info"><label>Penyesuaian</label>: {{ $formatMoneyStr(detailData.deliveryFee) }}</p>
        <el-divider></el-divider>
        <p class="middle-info"><label>Jumlah Pesanan</label>: {{ $formatMoneyStr(detailData.subFee) }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { downloadPDF } from '@/utils/exportToPdf'
import { queryinfoInvoiceApi, dealer_query_oneApi } from '@/api/user'

export default {
  name: 'Report',
  computed: {
    ...mapGetters([
      'name',
      'role'
    ])
  },
  data() {
    return {
      detailData: {},
      dealerData: {},
      fontSize: '16px',
    }
  },
  created() {
    // if (this.role != this.adminValue) {
    //   this.getCompanyInfo()
    // }
    this.checkID()
  },
  mounted() {
  },
  methods: {
    downloadPrint() {
      this.$print(this.$refs.print)
    },
    downloadPDF() {
      this.fontSize = '20px';
      downloadPDF(document.querySelector('#invoicepdf'), 'Invoice ' + this.detailData.invoiceId)
      this.fontSize = '16px';
    },
    checkID() {
      const oid = this.$route.params.id
      queryinfoInvoiceApi({
        oid: oid
      }).then(res => {
        this.detailData = res.data
        if (this.detailData.billesAddres == null) {
          this.detailData.billesAddres = {}
        }
        if (this.detailData.shopAddres == null) {
          this.detailData.shopAddres = {}
        }
        if (this.detailData.sysOrderMsg == null) {
          this.detailData.sysOrderMsg = {}
        }
        if (this.detailData.dealerBrief == null) {
          this.detailData.dealerBrief = {}
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getCompanyInfo() {
      dealer_query_oneApi().then(res => {
        this.dealerData = res.data
        if (this.dealerData.billesAddres == null) {
          this.dealerData.billesAddres = {}
        }
        if (this.dealerData.shopAddres == null) {
          this.dealerData.shopAddres = {}
        }
        if (this.dealerData.sysOrderMsg == null) {
          this.dealerData.sysOrderMsg = {}
        }
      }).catch(err => {
        this.dealerData = []
        console.log(err)
      })
    }
  }
}

</script>

<style lang="scss" scoped>
  .dashboard {
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  .head-big-title{
    text-align: left;
    font-size: 20px;
    margin: 20px 0 0 3%;
  }
  .big-title{
    text-align: left;
    font-size: 19px;
    margin: 20px 0 20px 3%;
    clear: both;
  }
  .dashboard-container{
    margin-top: 20px;
    text-align: center;
  }

  .two-card + .two-card{
    margin-left: 2%;
  }

  .two-card{
    width: 49%;
    text-align: left;
    float: left;

    .title{
      display: block;font-size: 15px;margin: 0;
    }
    .count{
      font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
    }
  }
  .one-card{
    width: 100%;
    text-align: left;
    float: left;

    .title{
      display: block;font-size: 19px;margin: 0;
    }
    .count{
      font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
    }
  }
  .last-days-order{
    width: 92%;
    margin: 0 4%;
    border-radius: 20px;
  }
  .last-days-order .erchart-div{
    height:278px;display: inline-block;background-color: white;border-radius: 10px;
  }
  .header-div{
    float: right;
    text-align: center;
    margin-right: 64px;
    position: relative;
    bottom: 21px;
  }
  .header-div p{
    margin: 10px 0;
  }
  .header-div img{
    width: 64px;
    height: 64px;
  }
  .head-info-three{
    width: 28%;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 15px;
    display: inline;
    float: left;
  }
  .card-div{
    width: 94%;text-align: left;margin: 0 3%
  }
  .card-div .title{
    width: 200px;
  }
  .margin-tops{
    margin-top: 20px;
  }
  .card-div .middle-info{
    width: 32%;
    display: inline-block;
    margin: 8px 0;
  }
  .total-sum-div{
    padding: 20px;
    text-align: left;
    width: 420px;float: right;margin-right: 4%;
  }
  .total-sum-div .middle-info{
    margin-left: 60px;
  }
  .total-sum-div .middle-info label{
    width: 188px;
    display: inline-block;
  }
  .card-div .two-info{
    width: 50%;
    display: inline-block;
    padding-right: 5%;
    margin-top: 10px;
    word-break: normal;
  }
</style>
